<template>
  <div class="ncov-wrapper">
    <div class="ncov-realdata">
      <card
        v-for="(descitem, descindex) in desclist"
        :key="descindex"
        class="ncov-card"
        :desc-data="descitem"
      />
    </div>
    <v-charts
      class="ncov-charts"
      autoresize
      :options="options.map"
    />
  </div>
</template>

<script>
// vue-charts
import VueEcharts from 'vue-echarts'
import 'echarts/lib/component/title'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/visualMapPiecewise'
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/map'
import china from 'echarts/map/json/china.json'

import Card from '@/components/card'
VueEcharts.registerMap('china', china)

const URL = '/ncov/index'
const APIKEY = 'bb1124400f9c0fc7b36efe60e379d324'
export default {
  name: 'Home',
  components: {
    'v-charts': VueEcharts,
    Card
  },
  data () {
    return {
      caselist: [],
      desclist: []
    }
  },
  computed: {
    options () {
      return {
        map: {
          title: {
            text: '全国最新疫情分布图',
            left: 'center',
            top: 10,
            textStyle: {
              color: '#fc6e64',
              fontWeight: 'bolder'
            }
          },
          dataset: {
            source: this.caselist,
            dimensions: ['provinceShortName', 'confirmedCount']
          },
          tooltip: {
            show: true,
            textStyle: {
              fontSize: 10
            },
            formatter: params => {
              const { marker, name, value } = params
              return `${marker}${name} ${value} 例`
            }
          },
          visualMap: {
            type: 'piecewise',
            left: 10,
            bottom: '10%',
            itemGap: 0,
            inRange: {
              symbol: 'rect',
              color: [ '#f7cdc9', '#e82812' ]
            },
            itemWidth: 6,
            itemHeight: 12,
            pieces: [
              { gt: 1000 }, // (1500, Infinity]
              { gt: 500, lte: 1000 }, // (1000, 1500]
              { gt: 100, lte: 500 }, // (500, 1000]
              { gt: 50, lte: 100 }, // (100, 500]
              { lte: 50 } // (-Infinity, 100]
            ],
            calculable: true,
            textStyle: {
              fontSize: 10
            }
          },
          toolbox: {
            show: false
          },
          series: [
            {
              type: 'map',
              mapType: 'china',
              roam: false,
              // silent: true,
              label: {
                show: true,
                fontSize: 8
              },
              itemStyle: {
                areaColor: '#fff'
              },
              emphasis: {
                itemStyle: {
                  areaColor: 'transparent'
                },
                label: { show: false }
              },
              left: 4,
              right: 4
            }
          ]
        }
      }
    }
  },
  mounted () {
    const params = { key: APIKEY }
    this.$axios
      .get(URL, { params })
      .then(resp => {
        const newslist = resp.newslist[0]

        const { desc } = newslist
        const caselist = newslist.case

        this.caselist = caselist

        const { confirmedCount, suspectedCount, curedCount, deadCount } = desc
        this.desclist = [
          { name: '确诊人数', value: confirmedCount, color: 'red' },
          { name: '疑似病例', value: suspectedCount, color: '#e82812' },
          { name: '治愈人数', value: curedCount, color: 'green' },
          { name: '死亡人数', value: deadCount }
        ]
      })
  }
}
</script>
<style lang="less" scoped>
.ncov-wrapper {
  width: 100%;
  height: 100%;
  .ncov-realdata {
    display: flex;
    height: 80px;
    padding: 0 10px;
    margin: 20px 0;

    .ncov-card {
      width: 25%;
    }
  }
  .ncov-charts {
    width: 100%;
  }
}
</style>
